<template>
  <div class="pro-table_pagination">
    <n-pagination
      v-model:page="paginationPage"
      v-model:page-size="pageSize"
      show-quick-jumper
      show-size-picker
      :page-sizes="size"
      :item-count="total"
      v-bind="pagination"
      @update:page-size="pageSizeChange"
    >
      <template #prefix="{ itemCount }">共 {{ itemCount }} 条</template>
    </n-pagination>
  </div>
</template>

<script lang="ts" setup>
  const emit = defineEmits(['update:page', 'update:size'])
  const props = defineProps({
    page: Number,
    total: Number,
    size: Number,
    pagination: [Object, Boolean]
  })
  const paginationPage = computed({
    get() {
      return props.page
    },
    set(value) {
      emit('update:page', value)
    }
  })

  const pageSize = computed({
    get() {
      return props.size
    },
    set(value) {
      emit('update:size', value)
    }
  })
  const size = [10, 20, 30, 40, 50, 100]

  function pageSizeChange(size) {
    paginationPage.value = 1
    pageSize.value = size
  }
</script>

<style lang="less" scoped>
  .pro-table_pagination {
    display: flex;
    justify-content: flex-end;
  }
</style>
